<template>
	<view >
		<view>
			<u-notice-bar mode="horizontal" :list="infolist"></u-notice-bar>
		</view>
		<u-swipe-action :show="item.show" :index="index" 
			v-for="(item, index) in list" :key="item.aid" 
		>
			<view class="item u-border-bottom" 			@click="showDetail(item)">
				<image mode="aspectFill" :src="item.img" />
				<view class="title-wrap">
					<text class="title u-line-2">{{ item.name }}    </text>
					<text style="font-size: 20rpx;">{{ item.startTime }}~{{ item.endTime }}</text>
				</view>
			</view>
		</u-swipe-action>
		<u-popup v-model="showPopup" mode="center" width="90%" height="90%" closeable mask>
			<view class="demo-img-wrap" style="margin-top: 60rpx;">
				<u-line color="#ecede3" style="margin: 20rpx 0;"></u-line>
				<image class="demo-image" :src="this.selectedDetail.img" mode="widthFix"></image>
			</view>
			<view style="font-size: 40rpx;margin: 20rpx;">
				{{this.selectedDetail.name}}
			</view>
			<u-line color="#ecede3" style="margin: 20rpx 0;"></u-line>
			<view style="font-size: 13rpx;">
				<u-icon name="error" color="#2979ff" size="38" style="margin:0 20rpx;"></u-icon>
				{{this.selectedDetail.endTime}}~{{this.selectedDetail.startTime}}
			</view>
			<u-line color="#ecede3" style="margin: 20rpx 0;"></u-line>
			<view>
				<u-icon name="map" color="#2979ff" size="38" style="margin:0 20rpx;"></u-icon>
				{{this.selectedDetail.local}}
			</view>
			<u-line color="#ecede3" style="margin: 20rpx 0;"></u-line>
			<view>
				<u-icon name="phone" color="#2979ff" size="38" style="margin:0 20rpx;"></u-icon>
				{{this.selectedDetail.phone}}
			</view>
			<u-line color="#ecede3" style="margin: 20rpx 0;"></u-line>
			<view>
				<u-icon name="tags-fill" color="#2979ff" size="38" style="margin:0 20rpx;"></u-icon>
				{{this.selectedDetail.info}}
			</view>
			<u-button :ripple="true" ripple-bg-color="#5555ff" style="margin-top: 40rpx;" @click="signUpActive()">取消报名</u-button>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [
				],
				infolist: [
					'最近活动马上开始了，注意参与时间',
				],
				disabled: false,
				btnWidth: 180,
				showPopup: false,
				buttonStatus:false,
				show: false,
				userInfo:"",
				selectedDetail:[],
			};
		},
		onLoad() {
			this.getList();
		},
		methods: {
			getList(){
				this.$H.get('user/userInfo').then(res => {
					this.userInfo = res.result;
					this.$H.get('active/signlist',{
						user_id :this.userInfo.uid
					}).then(res => {
						this.list = res.result;
					});	
				});			
				},
			showDetail(item) {
				this.selectedDetail = item;
				this.$H.get('active/signinfo', {
					user_id: this.userInfo.uid,
					active_id: this.selectedDetail.aid,
				}).then(res => {
					if (res.code == 0 && res.result != null) {
						this.buttonStatus = true;
					}
				})
				this.showPopup = true;
			},
			signUpActive(){
				this.$H.get('active/delete',{
					user_id :this.userInfo.uid,
					active_id:this.selectedDetail.aid
				}).then(res => {
					this.list = res.result;
					this.$u.toast('取消成功');
					this.showPopup=false;
					this.getList();
				});	
			},
		}
	};
</script>

<style lang="scss" scoped>
	.item {
		display: flex;
		padding: 20rpx;
		image {
			width: 120rpx;
			flex: 0 0 120rpx;
			height: 120rpx;
			margin-right: 20rpx;
			border-radius: 12rpx;
		}
	}
	.demo-warter {
		border-radius: 8px;
		margin: 5px;
		background-color: #ffffff;
		padding: 8px;
		position: relative;
	}
	
	.u-close {
		position: absolute;
		top: 32rpx;
		right: 32rpx;
	}
	
	.demo-image {
		width: 100%;
		border-radius: 4px;
	}
	
	.demo-title {
		font-size: 30rpx;
		margin-top: 5px;
		color: $u-main-color;
	}
	
	.demo-tag {
		display: flex;
		float: right;
		margin-top: 5px;
	}
	
	.demo-tag-owner {
		background-color: $u-type-error;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		padding: 4rpx 14rpx;
		border-radius: 50rpx;
		font-size: 20rpx;
		line-height: 1;
	}
	
	.demo-tag-text {
		border: 1px solid $u-type-primary;
		color: $u-type-primary;
		margin-left: 10px;
		border-radius: 50rpx;
		line-height: 1;
		padding: 4rpx 14rpx;
		display: flex;
		align-items: center;
		border-radius: 50rpx;
		font-size: 20rpx;
	}
	
	.u-card-wrap {
		background-color: $u-bg-color;
		padding: 1px;
	}
	
	.u-body-item {
		font-size: 32rpx;
		color: #333;
		padding: 20rpx 10rpx;
	}
	
	.u-body-item image {
		width: 120rpx;
		flex: 0 0 120rpx;
		height: 120rpx;
		border-radius: 8rpx;
		margin-left: 12rpx;
	}
	
	.demo-price {
		font-size: 10rpx;
		color: $u-type-error;
		margin-top: 5px;
	}
	
	.demo-shop {
		font-size: 22rpx;
		color: $u-tips-color;
		margin-top: 5px;
	}
	.title {
		text-align: left;
		font-size: 28rpx;
		color: $u-content-color;
		margin-top: 20rpx;
	}
</style>